<!DOCTYPE html>
<!--
    战双游戏卡片模板
    抓取自 https://www.kurobbs.com/person-center 并做适当修改
    by TomyJan
    2023.07.28
-->
<html lang=zh-CN>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>战双卡片 - 库洛插件</title>
<meta name=keywords content=库洛插件>
<meta name=description content=库洛插件>

<style>
    @font-face {
        font-family: "MiSans-Normal";
        src: url("../../font/MiSans-Normal.ttf");
        font-weight: normal;
        font-style: normal;
    }

    body {
        font-family: MiSans-Normal
    }

    .mr-4 {
        margin-right: 4px
    }

    .mr-12 {
        margin-right: 12px;
    }

    .pd-16 {
        padding: 16px
    }

    .mb-16 {
        margin-bottom: 16px
    }

    div,
    body {
        box-sizing: border-box;
        list-style: none;
        margin: 0;
        padding: 0
    }

    span,
    div {
        word-break: break-word;
        vertical-align: middle
            /*英文和中文竖直居中*/
    }

    .text-12 {
        font-size: 12px;
        line-height: 20px
    }

    .text-14 {
        font-size: 14px;
        line-height: 22px
    }

    .flex {
        display: flex
    }

    .flex-vertical-center {
        display: flex;
        align-items: center
    }

    .game-box-container[data-v-08c4bfda] {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 355px;
        height: 152px
    }

    .pns .game-box[data-v-08c4bfda] {
        width: 331px;
        height: 128px;
        background: url(https://web-static.kurobbs.com/resource/prod/assets/game-box-pns-02781a5b.png);
        background-size: 100% 100%
    }

    .game-box[data-v-08c4bfda] {
        position: absolute;
        font-size: 16px;
        color: #fff;
        flex: 1
    }

    .game-box-header .icon[data-v-08c4bfda] {
        width: 40px;
        height: 40px;
        border-radius: 4px
    }

    .game-box-header .role-info[data-v-08c4bfda] {
        flex: 1
    }

    .game-box-header .role-info .name[data-v-08c4bfda] {
        font-weight: 700
    }

    .game-box-header .role-info .level[data-v-08c4bfda] {
        height: 16px;
        font-size: 12px;
        line-height: 12px;
        padding: 2px 4px;
        color: #fff;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .32) 100%);
        border: .4px solid rgba(255, 255, 255, .5);
        border-radius: 2px
    }

    .game-box-header .role-info .show[data-v-08c4bfda] {
        margin-left: auto
    }

    .game-box-header .sub-info[data-v-08c4bfda] {
        color: #aeb6c2;
        font-weight: 400;
        opacity: .5
    }

    .game-box-footer[data-v-08c4bfda] {

        display: flex;
        justify-content: space-between
    }

    .game-box-footer .item[data-v-08c4bfda] {
        flex: 1;
        font-size: 12px;
        line-height: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        color: #8c95a3
    }

    .game-box-footer .item .number[data-v-08c4bfda] {
        display: flex;
        align-items: center;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        color: #fff
    }

    .game-box-footer .item .title[data-v-08c4bfda] {
        width: 100%;
        color: #8c95a3;
        font-weight: 400;
        text-align: center
    }

    .game-box-footer .item .icon[data-v-08c4bfda] {
        cursor: pointer
    }

    .better-checkbox:checked {
        border: none;
        background: #1673ff
    }

    .better-checkbox {
        width: 16px;
        height: 16px;
        border: solid 1.5px #dddddd;
        border-radius: 50%;
        vertical-align: top;
        margin-right: 4px;
        position: relative;
        appearance: none
    }

    .better-checkbox:checked::after {
        content: '';
        top: 4px;
        left: 3.5px;
        position: absolute;
        background: transparent;
        border: #fff solid 2px;
        border-top: none;
        border-right: none;
        height: 4px;
        width: 7px;
        transform: rotate(-45deg)
    }
</style>
</head>

<body>
    <div class="game-box-container pns" data-v-08c4bfda>
        <div class="game-box pd-16" data-v-08c4bfda>
            <div class="game-box-header flex mb-16" data-v-08c4bfda>
                <img class="icon mr-12" src="https://prod-alicdn-community.kurobbs.com/game/1677047559950121506.jpg" alt
                    data-v-08c4bfda>
                <div class=role-info data-v-08c4bfda>
                    <div class=flex-vertical-center data-v-08c4bfda>
                        <div class="mr-4 text-14 name" data-v-08c4bfda>TomyJan</div>
                        <div class=level data-v-08c4bfda>100级</div>
                        <div class=show data-v-08c4bfda>
                            <input name="checkbox" type="checkbox" class="better-checkbox " checked>展示
                        </div>
                    </div>
                    <div class="sub-info text-12" data-v-08c4bfda>
                        <span data-v-08c4bfda>星火服 | ID: 46218962</span>
                    </div>
                </div>
            </div>
            <div class="game-box-footer flex" data-v-08c4bfda>
                <div class=item data-v-08c4bfda>
                    <span class=number data-v-08c4bfda>33945</span>
                    <span class=title data-v-08c4bfda>角色总评分</span>
                </div>
                <div class=item data-v-08c4bfda>
                    <span class=number data-v-08c4bfda>21</span>
                    <span class=title data-v-08c4bfda>角色数量</span>
                </div>
                <div class=item data-v-08c4bfda>
                    <span class=number data-v-08c4bfda>3.1%</span>
                    <span class=title data-v-08c4bfda>涂装收集率</span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>